<nz-card>
  <form #queyForm class="nzx-query-container" nz-form [formGroup]="queryForm">
    <div nz-row [nzGutter]="nzxGutter" [nzJustify]="nzxJustify">
      @for (config of controls; track config; let i = $index) {
        @if (!config.hidden) {
          <div
            nz-col
            [nzSpan]="config.nzxSpan || 24 / lineNumber"
            [hidden]="config.collapse"
            [nzOrder]="i"
            >
            @if (config.controlName) {
              <nzx-configurable-query-item
                [form]="queryForm"
                [control]="config"
              ></nzx-configurable-query-item>
            }
          </div>
        }
      }

      <div
        class="nzx-query-btn"
        nz-col
        [nzOrder]="controls.length"
        [nzSpan]="nzxBtnSpan || 24 / lineNumber"
        >
        <div nz-row nzJustify="end" nzAlign="middle">
          <nz-space>
            <button
              *nzSpaceItem
              nz-button
              nzType="primary"
              type="button"
              title="Enter"
              (click)="search()"
              >
              {{ locale['query'] }}
            </button>
            <button
              *nzSpaceItem
              nz-button
              type="button"
              title="ctrl+r"
              (click)="reset()"
              >
              {{ locale['reset'] }}
            </button>
            <ng-container *nzSpaceItem>
              <ng-content></ng-content>
            </ng-container>
            @if (nzxCollapse) {
              <a
                *nzSpaceItem
                nz-button
                nzType="link"
                (click)="toggleCollapse()"
                >
                {{ collapseText }}
                <i nz-icon [nzType]="collapseIcon"></i>
              </a>
            }
          </nz-space>
        </div>
      </div>
    </div>
  </form>
</nz-card>
